<template>
  <div class="login-box">
    <!-- element ui有一个特点 组件名叫el-abc就会有一个类名叫.el-abc -->
    <el-card>
      <template #header> 黑马面经运营后台 </template>
      <template #default>
        <el-form ref="form" :model="loginForm" :rules="rules">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="loginForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="loginForm.password" type="password"></el-input>
          </el-form-item>
          <el-form-item style="text-align: center">
            <el-button type="primary" @click="login">登录</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </template>
    </el-card>
  </div>
</template>

<script>
// 跨域的解决方式
// 1. jsonp -> 废弃 没有人用 只有面试题才有这个需要了解
// 2. cors -> 面经都是用的是CORS 只要用了CORS，前端什么也不用处理
// 3. 反向代理 开发的 需要前端自己处理proxy 线上 需要后台java配置nginx进行反向代理
import { login } from "@/api/user";
export default {
  name: "login-page",
  data() {
    return {
      loginForm: {
        username: "admin8",
        password: "admin",
      },
      // trigger: "blur" 失焦时就验证
      rules: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
          { min: 5, max: 11, message: "长度在5到11个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
          { min: 5, max: 11, message: "长度在5到11个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    async login() {
      try {
        await this.$refs.form.validate();
        const {
          data: {
            data: { token },
          },
        } = await login(this.loginForm);
        console.log(token);
        this.$store.commit("user/setToken", token);
        this.$message.success("登录成功");
        this.$router.push("/");
      } catch (err) {
        console.log(err);
        this.$message.error("登录失败");
      }
    },
    reset() {
      console.log(1);
      this.$refs.form.resetFields();
    },
  },
};
</script>

<style scoped lang="scss">
.login-box {
  //百分比是一个相对单位 相对父元素
  height: 100vh;

  background: url("@/assets/login-bg.svg") no-repeat center center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-card {
  width: 420px;
  // sass中两种写法 ::v-deep 选择器名字 老的写法  不推荐
  ::v-deep(.el-card__header) {
    background: #727cf5;
    text-align: center;
    color: #fff;
    height: 80px;
    line-height: 40px;
  }
}
</style>
